$(function () {
    var lis = document.querySelectorAll('.tab ul li')
    console.log(lis);
    $('.tab ul>li').click(function () {
        var index = $(this).index()
        console.log(index);
        $(this).addClass('actives').siblings().removeClass('actives')
        $('.content>div').eq(index).show().siblings().hide()
    })
    $('.tab ul>li').eq(2).click()
})
$(function () {

    $(".step").click(function () {
        $(this).addClass("active").prevAll().addClass("active");
        $(this).nextAll().removeClass("active");
    });

    $(".step01").click(function () {
        $("#line-progress").css("width", "3%");
        $(".create").addClass("active").siblings().removeClass("active");
    });

    $(".step02").click(function () {
        $("#line-progress").css("width", "15%");
        $(".two").addClass("active").siblings().removeClass("active");
    });
    $(".step03").click(function () {
        $("#line-progress").css("width", "30%");
        $(".three").addClass("active").siblings().removeClass("active");
    });
    $(".step04").click(function () {
        $("#line-progress").css("width", "40%");
        $(".four").addClass("active").siblings().removeClass("active");
    });

    $(".step05").click(function () {
        $("#line-progress").css("width", "50%");
        $(".five").addClass("active").siblings().removeClass("active");
    });

    $(".step06").click(function () {
        $("#line-progress").css("width", "60%");
        $(".six").addClass("active").siblings().removeClass("active");
    });

    $(".step07").click(function () {
        $("#line-progress").css("width", "70%");
        $(".seven").addClass("active").siblings().removeClass("active");
    });
    $(".step08").click(function () {
        $("#line-progress").css("width", "80%");
        $(".eight").addClass("active").siblings().removeClass("active");
    });

    $(".step09").click(function () {
        $("#line-progress").css("width", "90%");
        $(".nine").addClass("active").siblings().removeClass("active");
    });

    $(".step10").click(function () {
        $("#line-progress").css("width", "100%");
        $(".ten").addClass("active").siblings().removeClass("active");
    });


})

$(function(){
    let stars = document.getElementById('stars')
    let moon = document.getElementById('moon')
    let mountains_behind = document.getElementById('mountains_behind')
    let text = document.getElementById('text')
    let heart = document.getElementById('heart')
    let mountains_front = document.getElementById('mountains_front')
    let header = document.querySelector('header')
    var FH = document.body.clientHeight
    var W = document.body.clientWidth
    var campfire = document.querySelector('.campfire')
    var glowfly = document.querySelector('.glowflies')
    var alltext = document.querySelector('.textwenzi')
    var texts = document.getElementById('wenzi')
    var texts1 = document.getElementById('wenzi1')
    var texts2 = document.getElementById('wenzi2')
    var texts3 = document.getElementById('wenzi3')
    if (FH > 666) {
        campfire.style.position = 'absolute';
        campfire.style.left = '70%'
        campfire.style.top = '100%'
    }
    if (W > 900) {
        glowfly.style.display = 'none'
    } 
    if (W < 850) {
        texts.style.fontSize = '5px'
        texts1.style.fontSize = '5px'
        texts2.style.fontSize = '5px'
        texts3.style.fontSize = '5px'
    }
    window.addEventListener('scroll', function () {
        let value = window.scrollY;
        var H = window.pageYOffset

        moon.style.top = value * 1.05 + 'px';
        // console.log(H);
        if (H > 550) {
            moon.style.display = 'none'
        } else {
            moon.style.display = 'block'
        }
        // if (H > 650) {
        //     heart.style.display = 'none'
        // } else {
        //     heart.style.display = 'block'
        // }
        // mountains_behind.style.top = value * 0.5 +'px';
        // mountains_front.style.top = value * 0 + 'px';
        // text.style.marginRight = value * 4 + 'px';
        // text.style.marginTop = value * 1.5 + 'px';
        // heart.style.marginTop = value * 1.5 + 'px';
        // header.style.top = value * 0.5 + 'px';
        // console.log(value);
    })
    // setTimeout(function(){
    //     $('.textwenzi').css({
    //         display:'none'
    //     })
    // },3000)

})